<template>
    <div>
        <div style="display: flex;align-items: center;cursor: pointer;" @click="drawer = true">
            <div v-if="!showBtn" style="display: flex;align-items: center;" @click="drawerFun" >
                <el-avatar size="medium" :src="userInfos.avatar" style="margin-right: 10px"></el-avatar>
                <div style="font-size: 12px;"> {{ userInfos.name }} </div>
            </div>
            <el-button v-else size="mini" slot="reference" type="success" @click="drawerFun" style="padding: 10px">详情</el-button>
        </div>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :modal="modalShow">
            <el-descriptions class="margin-top" title="" :column="2" size="mini" :border="true" style="text-align: center;">
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        姓名
                    </template>
                    <div style="display: flex;align-items: center;">
                        <!-- <el-avatar :size="35" :src="userInfo.avatar" style="margin-right: 10px;text-align: center;"></el-avatar> -->
                        <el-image style="width: 36px; height: 36px;border-radius:36px" :src="userInfo.avatar" :preview-src-list="[userInfo.avatar]"></el-image>
                        <div style="color: black;text-align: center;" class="ml-10">
                            {{ userInfo.name }}
                        </div>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item style="text-align: center;">
                    <template slot="label">
                        区号
                    </template>
                    {{ userInfo.country_code }}
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                    <template slot="label">
                        手机号
                    </template>
                    {{ userInfo.mobile }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">
                        性别
                    </template>
                    {{ userInfo.gender == 0 ? "未知" : userInfo.gender == 1 ? "男" : "女" }}
                    <!-- 0未知 1男 2女 -->
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        姓名
                    </template>
                    {{ userInfo.cert_name }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        身份证号码
                    </template>
                    {{ userInfo.cert_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        vip等级
                    </template>
                    {{ userInfo.vip_level }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        vip失效时间
                    </template>
                    {{ userInfo.vip_expire }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    {{ userInfo.password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        在线状态
                    </template>
                    <text v-if="userInfo.online == 0">0</text>
                    <text v-else-if="userInfo.online == 1">1</text>
                    <text v-else-if="userInfo.online == 2">2</text>
                    <text v-else>3</text>

                </el-descriptions-item>

                <el-descriptions-item :span="1">
                    <template slot="label">
                        邀请码
                    </template>
                    {{ userInfo.invitation_code }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        父级用户
                    </template>
                    {{ userInfo.parent_id }}
                </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">
                        可用余额
                    </template>
                    {{ userInfo.balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        提现余额
                    </template>
                    {{ userInfo.withdraw_balance }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        禁用状态
                    </template>
                    {{ userInfo.disable == 0 ? "正常" : "禁用" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        资金密码
                    </template>
                    {{ userInfo.fun_password }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        青少年模式密码
                    </template>
                    {{ userInfo.teenager_password }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        背景地址
                    </template>
                    {{ userInfo.background}} 
                </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">
                        是否主播
                    </template>
                    {{ userInfo.is_anchor == 0 ? "否" : "是" }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">
                        个人简介
                    </template>
                    {{ userInfo.subtitle }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">
                        所在城市
                    </template>
                    {{ userInfo.city }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录IP
                    </template>
                    {{ userInfo.login_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录时间
                    </template>
                    {{ userInfo.login_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        登录地址
                    </template>
                    {{ userInfo.login_address }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        是否认证
                    </template>
                    {{ userInfo.authentication }}
                </el-descriptions-item>



                <el-descriptions-item>
                    <template slot="label">
                        开启私人定制
                    </template>
                    {{ userInfo.customized == 0 ? "否" : "是" }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        注册IP
                    </template>
                    {{ userInfo.register_ip }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        注册地址
                    </template>
                    {{ userInfo.register_address }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        MAC地址
                    </template>
                    {{ userInfo.mac }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        设备型号
                    </template>
                    {{ userInfo.model }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        终端号码
                    </template>
                    {{ userInfo.terminal }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        创建时间
                    </template>
                    {{ userInfo.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        用户标签
                    </template>

                    <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in userInfo.labels" :key="index">
                        {{ item }} </el-tag>

                </el-descriptions-item>

            </el-descriptions>


        </el-drawer>
    </div>
</template>

<script>
export default {
    props: {
        modalShow: {
            default: true,
            type: Boolean,
        },
        user_id: {
            type: [String, Number],
        },
        showBtn: {
            default: true,
            type: Boolean
        },
        userInfos: {
            type: Object,
        }
    },

    data() {
        return {
            userInfo: {},
            drawer: false, //是否显示抽屉
        }
    },
    mounted() {
       // this.getUserInfo(this.user_id)
    },
    methods: {
        getUserInfo(id) {
            let that = this
            this.$request.get('/offline/get/' + id).then((res) => {
                this.userInfo = res
                console.log('现在才加载')
            })
        },
        drawerFun(){
            this.getUserInfo(this.user_id)
            this.drawer = true
        }
    }

}
</script>

<style lang="scss" ></style>